import { cloneDeep, merge } from 'lodash-es'
import { getViewportPx } from '@/utils/formatter'
const color = [
  '#FC5C53',
  '#47D147',
  '#F5BF49',
  '#5486F0',
  '#C763F2',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc'
]
const fontSize = getViewportPx(14)
// 散点图公共hook
export const useScatterOptions = (data: any[], options?: any) => {
  const categoryAxis: any = {
    type: 'category',
    axisLabel: {
      fontSize: getViewportPx(16),
      interval: 0,
      // width: getViewportPx(50),
      overflow: 'breakAll'
    },
    axisLine: {
      show: true
    },
    axisTick: {
      show: true,
      alignWithLabel: true
    }
  }
  const valueAxis = {
    type: 'value',
    // name: '单位（人）',
    nameTextStyle: {
      fontSize: getViewportPx(12),
      color: '#aaa',
      padding: [0, 0, 0, 14]
    },
    axisLabel: {
      fontSize: getViewportPx(16)
    },
    axisLine: {
      show: true
    },
    axisTick: {
      show: true
    },
    splitLine: {
      show: true,
      lineStyle: {
        // 使用深浅的间隔色
        color: ['#919191ab']
      }
    }
  }
  const xAxis = cloneDeep(options?.xAxis?.type === 'category' ? categoryAxis : valueAxis)
  const yAxis = cloneDeep(options?.yAxis?.type === 'category' ? categoryAxis : valueAxis)
  let onlyOneSeries = false // 是否只有一条series数据
  if (!options) {
    options = {}
  }
  if (!options?.series?.length || options?.series?.length === 1) {
    onlyOneSeries = true
    if (!options?.series) {
      options.series = [{}]
    }
    if (!options?.series?.[0]) {
      options.series[0] = {}
    }

    if (!options.series?.[0]?.data?.length) {
      options.series[0].data = [...data]
    }
    categoryAxis.data = options.series[0].data.map((item) => item.name)
  }
  const commonMarketPoint = (onlyShowDot) => {
    return onlyShowDot
      ? {}
      : {
          symbolSize: parseInt(getViewportPx(12, true)),
          markArea: {
            silent: true,
            itemStyle: {
              color: 'transparent',
              borderWidth: 1,
              borderType: 'dashed'
            },
            data: [
              [
                {
                  xAxis: 'min',
                  yAxis: 'min'
                },
                {
                  xAxis: 'max',
                  yAxis: 'max'
                }
              ]
            ]
          },
          markPoint: {
            symbol: 'pin',
            symbolSize: parseInt(getViewportPx(50, true)),
            data: [
              {
                type: 'max',
                name: '最大'
              },
              {
                type: 'min',
                name: '最小'
              }
            ]
          }
        }
  }
  let baseOptions: any = {
    color,
    title: {
      text: '',
      left: 'left',
      padding: [2, 2, 2, 2],
      textStyle: {
        fontSize: getViewportPx(16)
      }
    },
    tooltip: {
      // confine: true,
      // trigger: 'axis',
      // formatter: '{b}：{c}',
      // axisPointer: {
      // type: 'shadow'
      // },
      textStyle: {
        fontSize
      }
    },
    grid: {
      // top: 65,
      left: '10%'
      // left: getViewportPx(72),
      // right: 0
      // bottom: getViewportPx(100)
    },
    legend: {
      bottom: getViewportPx(16),
      itemWidth: parseInt(getViewportPx(16, true)),
      itemHeight: parseInt(getViewportPx(16, true)),
      itemGap: parseInt(getViewportPx(22, true)),
      icon: 'circle',
      textStyle: {
        fontSize: getViewportPx(16),
        color: 'rgba(148, 148, 148, 1)'
      },
      right: getViewportPx(56)
    },
    xAxis,
    yAxis,
    series: options.series.map((seriesItem, seriesIndex) =>
      merge(
        {
          type: 'scatter',
          emphasis: {
            focus: 'series'
          }
        },
        commonMarketPoint(seriesItem?.onlyShowDot),
        seriesItem
      )
    )
  }
  baseOptions = merge(baseOptions, options)

  return {
    baseOptions
  }
}
